<template>
  <!-- 首页 -->
  <div class="home-box">
    <div class="title-box">
      <div class="title">{{ name }}，{{ curTimeState }}</div>
      <div class="msg">欢迎使用园区能源与碳排放管理平台！</div>
    </div>
    <div class="home-bg-box" />
    <div class="home-time-box">北京时间：{{ $formatDate(new Date(),'{y}年{m}月{d}日 {h}:{i}') }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    curTimeState() {
      // 获取当前时间
      const timeNow = new Date()
      // 获取当前小时
      const hours = timeNow.getHours()
      // 设置默认文字
      let text = ``
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        text = `早上好`
      } else if (hours > 10 && hours <= 14) {
        text = `中午好`
      } else if (hours > 14 && hours <= 18) {
        text = `下午好`
      } else if (hours > 18 && hours <= 24) {
        text = `晚上好`
      }
      // 返回当前时间段对应的状态
      return text
    }
  }
}
</script>

<style lang="scss" scoped>
.home-box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .title-box {
    padding: 40px 0 48px 40px;
    .title {
      font-size: 28px;
      color: #333;
      font-weight: bold;
    }
    .msg {
      margin-top: 25px;
      font-size: 18px;
      color: #666;
    }
  }

  .home-bg-box {
    width: 500px;
    height: 370px;
    background-image: url(~@/assets/images/home-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  .home-time-box {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin-top: 30px;
  }
}
</style>
